<template>
	<view class="page">
		<view class="other-login-text">
			<view class="line"></view>
			<view class="text">推荐以下方式登录</view>
			<view class="line"></view>
		</view>
		<view class="other-login">
			<button class="wx-login" @click="wxLogin">微信授权登录</button>
		</view>
	</view>
</template>

<script>
	import {
		mapActions,
		mapMutations
	} from "vuex";
	export default {
		name: "login",
		data() {
			return {
				sessionKey: "",
				isBindMobile: false //是否显示绑定手机组件
			}
		},
		onLoad(opts) {
			//分店的id
			this.branch_shop_id = opts.branch_shop_id ? opts.branch_shop_id : "";
			//桌号
			this.table_code = opts.table_code ? opts.table_code : "";
		},
		methods: {
			...mapActions({
				getWeChatOpenId: "user/getWeChatOpenId", //获取微信小程序用户的openid
				saveWeChatUser: "user/saveWeChatUser" //保存用户信息
			}),
			...mapMutations({
				LOGIN: "user/LOGIN"
			}),
			//微信授权登录
			wxLogin() {
				uni.login({
					provider: 'weixin',
					success: async (loginRes) => {
						console.log("微信登录:",loginRes)
						let code = loginRes.code;
						let openData = await this.getWeChatOpenId({
							code: code,
							appid: "wx8c160cedd9ae9b3b",
							secret: "1a60880df534fc946dc0fb9e9c74ca1b"
						});
						this.sessionKey = openData.data.session_key;
						console.log("sessionkey:", this.sessionKey)
						// 获取用户信息
						uni.getUserInfo({
							provider: 'weixin',
							success: async (infoRes) => {
								//用户信息
								console.log("微信用户信息:",infoRes)
								let userInfo = {
									"nickname": infoRes.userInfo.nickName,
									"sex": infoRes.userInfo.gender,
									"openid": openData.data.openid,
									"province": infoRes.userInfo.province,
									"city": infoRes.userInfo.city,
									"headimgurl": infoRes.userInfo.avatarUrl
								};
								//保存用户信息
								let userInfoRes = await this.saveWeChatUser({
									branch_shop_id: this.branch_shop_id,
									table_code: this.table_code,
									userinfo: JSON.stringify(userInfo)
								});
								if (userInfoRes.code == 200) { //用户信息保存成功
									this.LOGIN({
										uid: userInfoRes.data.uid,
										token: userInfoRes.data.token,
										openid: userInfoRes.data.open_id
									});
									if (userInfoRes.data.isbind == '1') { //手机号已绑定
										//返回上一页
										uni.navigateBack({
											delta: 1
										})
									} else {
										//没有绑定手机号，显示绑定手机号的组件
										this.isBindMobile = true;
									}
								} else {
									uni.showToast({
										title: userInfoRes.data,
										icon: "none",
										duration: 2000
									})
								}

							}
						});
					}
				});
			}
		}
	}
</script>

<style scoped>
	.page {
		width: 100%;
		min-height: 100vh;
		overflow: hidden;
		background-color: #FFFFFF;
	}

	.other-login-text {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.other-login-text .line {
		width: 30%;
		height: 1px;
		background-color: #CCCCCC;
	}

	.other-login-text .text {
		font-size: 28rpx;
		color: #333333
	}

	.other-login {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.other-login .wx-login {
		width: 80%;
		height: 80rpx;
		background-color: #21B319;
		margin: 0 auto;
		border-radius: 5px;
		color: #FFFFFF;
		font-size: 32rpx;
		text-align: center;
		line-height: 80rpx;
	}
</style>